<div class="container" id="event-organizer">
			<div>			
	<!--			<div id="organizer-nav">
					<h2>EVENT ORGANIZER</h2>
					<button id="create-event" type="button"> Create Event </button>
					<button id="list-view-btn" type="button"> List View of Events </button>
					<button id="cal-view-btn" type="button"> Calendar View of Events </button> 
				</div> -->
				
				<div id="organizer-nav">
					<h2>EVENT ORGANIZER</h2>
					<ul class="nav nav-tabs nav-stacked">
						<li> <a id="create-event" class="h4"> Create Event</a> </li>
						<li> <a id="cal-view-btn" class="h4"> Calendar View of Events </a> </li>
						<li> <a id="list-view-btn" class="h4"> List View of Events </a> </li>
					</ul>
				</div>

				<div id="organizer-head">	
				</div>

				<div id="content">

					<div id="cal-view">
						<p> eto ung kalendaryo </p>
					</div>

					<div id="list-view">
						<p> eto ung listahan </p>
					</div>

					<div id="event-detail-menu">
						<button id="event" type="button" class="btn btn-primary">  Event Details </button>
						<button id="supplier" type="button" class="btn btn-primary">  Suppliers </button>
						<button id="checklist" type="button" class="btn btn-primary">  Checklists </button>
						<button id="task" type="button" class="btn btn-primary">  Tasks </button>
					</div> <!-- eventDetailMenu -->

<!-- START OF EVENT DETAILS TAB -->
					<div id="event-details">						
						<form id="event-details-form" role="form" >
							<div class="form-group">
								<div class="row">
									<div class="col-md-6">
										<label> Event Name: </label>
									</div>
									<div class="col-md-6">
										<label> Event Type: </label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<input type="text" class="form-control">
									</div>
									<div class="col-md-3">	
										<select class="form-control">
											<option value="none"> </option>
											<option value="bday">Birthday</option>
											<option value="wed">Wedding</option>	
										</select>
									</div>
									<div class="col-md-3">
										<button id="new-etype-btn" class="btn btn-info" data-toggle="modal" data-target="#new-etype-form">
											New Event Type
										</button>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label> Client: </label>
								
								<div class="row">
									<div class="col-md-9">	
										<select class="form-control">
											<option value="clientname"> </option>	
										</select>
									</div>
									<div class="col-md-3">
										<button id="new-client-btn" class="btn btn-info" data-toggle="modal" data-target="#new-client-form">
											New Client
										</button>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<div class="row">
									<div class="col-md-6">
										<label> Start Date: </label>
									</div>
									
									<div class="col-md-6">
										<label> End Date: </label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<input type="date" class="form-control">
									</div>
									
									<div class="col-md-6">
										<input type="date" class="form-control">
									</div>
								</div>
								
							</div>
							
							<div class="form-group">
								<label> Location: </label>
								<div class="row">
									<div class="col-md-6">
										<input type="text" class="form-control" disabled>
									</div>
									<div class="col-md-4">
									
										<div class="input-group">
											<select class="form-control">
												<option value="eventlocs"> </option>	
											</select>
											<div class="input-group-btn">
												<button id="add-supplier" class="btn btn-default"> Add </button> 
												<!-- Button and dropdown menu -->
											</div>
										</div>
									</div>
									<div class="col-md-2">
										<button id="new-venue-btn" class="btn btn-info" data-toggle="modal" data-target="#new-venue-form">
											New Venue
										</button>
									</div>
								</div>
								
							</div>
							
							<div class="form-group">
								<label> Event Coordinator: </label>
								<div class="row">
									<div class="col-md-9">
										<select class="form-control">
											<option value="coordname"> </option>	
										</select>
									</div>
									<div class="col-md-3">
										<button id="new-coord-btn" class="btn btn-info" data-toggle="modal" data-target="#new-coord-form">
											New Coordinator
										</button>
									</div>
								</div>
								
							</div>
							
							<div class="form-group">
								<label> Event Notes: </label>
								<textarea class="form-control" rows="4"></textarea>
							</div>
							<div id="form-nav">
								<button type="button" class="btn btn-default">Next</button>
							</div>
						</form>
						
					</div> <!-- div : eventDetails -->

	<!-- START OF NEW CLIENT BUTTON -->
					<!-- Modal -->
					<div class="modal fade" id="new-client-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Client Detail</h4>
								</div>
								<div class="modal-body">
									<form id="client-detail" role="form">
										<div class="from-group">
											<label> Last Name: </label>
											<input type="text" class="form-control">
										</div>
										<div class="from-group">
											<label> First Name: </label>
											<input type="text" class="form-control">
										</div>
										<div class="from-group">
											<label> Contact Number: </label>
											<input type="text" class="form-control">
										</div>
										<div class="from-group">
											<label> Home Address: </label>
											<input type="text" class="form-control">
										</div>
										<div class="from-group">
											<label> Email Address: </label>
											<input type="text" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
	<!-- END OF NEW CLIENT BUTTON -->
	
	<!-- START OF NEW E-TYPE BUTTON -->
					<!-- Modal -->
					<div class="modal fade" id="new-etype-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">New Event Type</h4>
								</div>
								<div class="modal-body">
									<form id="client-detail" role="form">
										<div class="form-group">
											<label> Event Type Name: </label>
											<input type="text" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
	<!-- END OF NEW E-TYPE BUTTON -->
	
	<!-- START OF NEW VENUE BUTTON -->
					<!-- Modal -->
					<div class="modal fade" id="new-venue-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">New Venue</h4>
								</div>
								<div class="modal-body">
									<form id="venue-detail" role="form">
										<div class="from-group">
											<label> Venue Name: </label> <input type="text" class="form-control">
										</div>
										<div class="from-group">
											<label> Address: </label> <input type="text" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
	<!-- END OF NEW VENUE BUTTON -->
	
	<!-- START OF NEW COORDINATOR BUTTON -->
					<!-- Modal -->
					<div class="modal fade" id="new-coord-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Coordinator's Detail</h4>
								</div>
								<div class="modal-body">
									<form id="coord-detail" role="form">
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<label> Last Name: </label>
													<input type="text" class="form-control">
												</div>
											</div>
											
											<div class="col-md-6">
												<div class="form-group">
													<label> First Name: </label>
													<input type="text" class="form-control">
												</div>
											</div>
										</div>
										<div class="row">	
											<div class="col-md-6">
												<div class="form-group">
													<label> Middle Name: </label>
													<input type="text" class="form-control">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<label> Gender: </label>
													<div class="radio">
														<label> <input type="radio"> Male </label>
													</div>
													<div class="radio">
														<label> <input type="radio"> Female </label>
													</div>
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<label> Birthday: </label>
													<input type="date" class="form-control">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<label> Contact Number: </label>
													<input type="text" class="form-control">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<label> Email Address: </label>
													<input type="text" class="form-control">
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label> Home Address: </label>
													<input type="text" class="form-control">
												</div>
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
	<!-- END OF NEW COORDINATOR BUTTON -->

<!-- END OF EVENT DETAILS TAB -->
	
<!-- START OF SUPPLIER TAB -->
					<div id="event-supplier">
						<!-- Button trigger modal -->
						<button class="btn btn-primary" data-toggle="modal" data-target="#new-supplier-form">
							New Supplier
						</button>
						<hr/>

						<div id="supplier-container">
							<table class="table table-hover">
								<thead>
									<th> Company Name </th> <th> Company Address </th>
								</thead>
								<tbody>
									<tr> <td> Company Name </td> <td> Company Address </td> </tr>
									<tr> <td> Company Name </td> <td> Company Address </td> </tr>
								</tbody>
							</table>
						</div>
					</div>
				
	<!-- START OF NEW SUPPLIER BUTTON -->

					<!-- Modal -->
					<div class="modal fade" id="new-supplier-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							 <div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Supplier Detail</h4>
								</div>
								<div class="modal-body">
									<form id="supplier-detail" role="form">
										<div class="form-group">
											<label> Company Name: </label>
											<input type="text" class="form-control">
										</div>
										<div class="form-group">
											<label> Company Services: </label>
											<input type="text" class="form-control">
										</div>
										<div class="form-group">
											<label> Contact Person: </label>
											<input type="text" class="form-control">
										</div>
										<div class="form-group">
											<label> Contact Number: </label>
											<input type="text" class="form-control">
										</div>
										<div class="form-group">
											<label> Company Address: </label>
											<input type="text" class="form-control">
										</div>
										<div class="form-group">
											<label> Email Address: </label>
											<input type="text" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->

	<!-- END OF NEW SUPPLIER BUTTON -->

<!-- END OF SUPPLIER TAB -->

<!-- START OF CHECKLIST TAB -->

					<div id="event-checklist">
						<!-- Button trigger modal -->
						<button id="new-category-btn" class="btn btn-primary" data-toggle="modal" data-target="#new-category-form">
							New Category
						</button>
						<!-- Button trigger modal -->
						<button id="new-list-btn" class="btn btn-primary" data-toggle="modal" data-target="#new-list-form">
							New List
						</button>
					</div>
				
	<!-- START OF NEW CATEGORY BUTTON -->
					<!-- Modal -->
					<div class="modal fade" id="new-category-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							 <div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Category Detail</h4>
								</div>
								<div class="modal-body">
									<form id="category-detail" role="form">
										<div class="form-group">
											<label> New Category: </label>
											<input type="text" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->

	<!-- END OF NEW CATEGORY BUTTON -->

	<!-- START OF NEW LIST BUTTON -->
					<!-- Modal -->
					<div class="modal fade" id="new-list-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							 <div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">List Detail</h4>
								</div>
								<div class="modal-body">
									<form id="category-detail">
										<div class="form-group">
											<label> New List: </label>
											<input type="text" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
	<!-- END OF NEW LIST BUTTON -->

<!-- END OF CHECKLIST TAB -->

<!-- START OF TASK TAB -->
					<div id="coord-task">
						<button id="new-task-btn" class="btn btn-primary" data-toggle="modal" data-target="#new-task-form">
							Add Task
						</button>
						<hr/>
						<div id="task-container">
							dito mapapakita lahat ng task :)
						</div>
					</div>

	<!-- START OF NEW TASK BUTTON -->					
					<!-- Modal -->
					<div class="modal fade" id="new-task-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							 <div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">New Task</h4>
								</div>
								<div class="modal-body">
									<form id="task-detail" role="form">	
										<div class="form-group">
											<label> Task: </label> 
											<textarea class="form-control"> </textarea>
										</div>
										<div class="form-group">
											<label> Date: </label>
											<input type="date" class="form-control">
										</div>
										<div class="form-group">
											<label> Time: </label>
											<input type="time" class="form-control">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->

	<!-- END OF NEW TASK BUTTON -->

<!-- END OF TASK TAB -->

				</div> <!-- end ng div content -->
				<div id="foot">
					footer lang naman
				</div>



			</div><!-- div -->
		</div><!-- EventOrganizer -->